<template>
  <div class="container">
    <el-button type="primary" @click="addView">添加视角</el-button>
    <el-button type="primary" @click="clearAllViews">清空视角</el-button>

    <!-- 使用key强制更新整个列表 -->
    <div class="img-box">
      <div v-for="(item, index) in views" :key="index" class="view-item">
        <el-image
          style="width: 220px; height: 180px"
          @click="flyToView(index)"
          :src="item.thumbnail"
          fit="fill"
          :class="{ focus: currentViewIndex == index }"
        />
        <el-input
          v-model="item.name"
          style="width: 220px"
          @blur="resetViewName(index, item.name)"
          :placeholder="'视角' + index"
        />
        <span class="close" @click="deleteView(index)">❌</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESCameraViewCollection } from 'earthsdk3'
const props = defineProps({
  objm: {
    type: Object,
    required: true,
  },
})
const viewCollection = ref(null)
// 创建一个独立的响应式数组
const views = ref([])
//初始化多个视角
// const views = [
//   {
//     duration: 1,
//     position: [116.38836950514933, 39.90152264173749, 2558.2266625402162],
//     rotation: [359.96364396289476, -48.66554801391198, 0.0011063677408178429],
//     thumbnail:
//       '',
//     name: '视角1',
//   },
//   {
//     duration: 1,
//     position: [116.39355837748668, 39.97945849253805, 425.7974209221731],
//     rotation: [359.52382957543205, -54.15362525868217, 0.00022456053970542513],
//     thumbnail:
//       '',
//     name: '视角2',
//   },
//   {
//     duration: 1,
//     position: [116.60748747942176, 40.04720047083411, 2484.0350082986993],
//     rotation: [352.3304804630354, -45.37457183515052, 0.0009119860607667718],
//     thumbnail:
//       '',
//     name: '视角3',
//   },
// ]

// objm.cameraViewsManager.views = [...views]

// // 3
// const viewCollection = objm.cameraViewsManager
const currentViewIndex = ref(-1) //currentViewIndex    number    只读属性，当前视角的索引值    -1
// 初始化视角集合  ESCameraViewCollection 视角集合管理对象
viewCollection.value = props.objm.createSceneObject(ESCameraViewCollection)
// 监听当前索引值  currentViewIndex属性变化便会触发
//点击对应的视角  currentViewIndex属性值会改变
viewCollection.value.currentViewIndexChanged.don((val) => {
  currentViewIndex.value = val //用于绑定选中样式
})
// 添加视角
const addView = () => {
  viewCollection.value.addView() //保存当前视角信息至views
  // 手动触发响应式更新
  views.value = [...viewCollection.value.views]
  console.log('添加视角', viewCollection.value.views)
}
// 重命名视角
const resetViewName = (index, value) => {
  viewCollection.value.resetViewName(index, value) //resetViewName  更改index位置的视角信息的name
}

// 飞向视角
const flyToView = (index) => {
  viewCollection.value.flyToView(index) //飞入指定index的视角；
  viewCollection.value.setCurrentView(index) //把views的index位置的视角设置为当前轮播高亮视角
}

// 清空全部视角
const clearAllViews = () => {
  viewCollection.value.clearAllViews() //清空视角
  views.value = [...viewCollection.value.views]
}

// 删除指定视角；
const deleteView = (index) => {
  console.log('删除index', index)
  viewCollection.value.deleteView(index)
  views.value = [...viewCollection.value.views]
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 160px;
  right: 10px;
  width: 500px;
  padding: 20px;
  background-color: rgba(29, 37, 45, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;

  button {
    width: 100%;
    height: 40px;
    margin: 0;
  }

  .img-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    max-height: 680px;
    overflow: auto;
    .view-item {
      position: relative;
      display: flex;
      gap: 5px;
      margin-bottom: 15px;
      flex-direction: column;
      .el-image {
        border-radius: 5px;
      }
      .focus {
        border: 3px solid #409eff;
      }
      .close {
        position: absolute;
        top: 5px;
        right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        width: 30px;
        height: 30px;
        background-color: rgba(35, 32, 24, 0.8);
      }
    }
  }
}
</style>
